<template>
  <div class="common-layout">
    <div class="my-navigation" id="navigation">
      <el-row>
        <el-col
          :span="10"
          style="
            display: flex;
            align-items: center;
            -webkit-box-align: center;
            height: 51px;
            justify-content: center;
          "
        >
          <img :src="topEditLogo" class="img-logo" />
          <div class="line"></div>
          <img :src="iJournalLogo" class="img-logo" />
        </el-col>
        <el-col
          :span="14"
          style="
            display: flex;
            align-items: center;
            -webkit-box-align: center;
            height: 51px;
          "
        >
          <div v-for="(item, i) in titleList" :key="i" class="nav_item">
            <span> {{ item }} </span>
          </div>
          <el-button type="primary" class="login-button">登录/注册</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="sidebar" :class="[isShow ? 'sidebar_fixed' : '']">
      <div class="item">
        <i class="iconfont icon-aixin"></i
        ><span class="margin-top-5" style="display: none">我的关注</span>
      </div>
      <div class="item">
        <i class="iconfont icon-wodepinglun"></i
        ><span class="margin-top-5" style="display: none">我的评论</span>
      </div>
      <div class="item back_top" v-if="isShow" @click="scrollStep()">
        <el-icon><ArrowUp /></el-icon>
      </div>
    </div>
    <el-container>
      <el-header class="my-header">
        <div style="margin-bottom: 15px">
          <el-input
            v-model="keyword"
            placeholder="请输入内容"
            class="input-search-select"
          >
            <template #prepend>
              <el-select
                v-model="keywordType"
                style="width: 115px; height: 100%"
              >
                <el-option label="ISSN" value="issn" />
                <el-option label="期刊名称" value="title" />
                <el-option label="简称" value="abbr" />
                <el-option label="学科分类" value="category" />
              </el-select>
            </template>
            <template #append>
              <el-button
                type="primary"
                :icon="Search"
                style="border-radius: 0px; width: 58px"
                @click="searchQuery"
              />
            </template>
          </el-input>
        </div>
        <el-form
          :inline="true"
          :model="formInline"
          label-width="180px"
          class="demo-form-inline"
        >
          <el-form-item label="影响因子">
            <el-input
              v-model="formInline.ifStart_2019"
              placeholder=""
              clearable
              @change="yingziInput1"
              class="yxyz-input" /><span class="divide"></span>
            <el-input
              v-model="formInline.ifEnd_2019"
              placeholder=""
              clearable
              @change="yingziInput2"
              class="yxyz-input"
          /></el-form-item>
          <el-form-item label="JCR分区">
            <el-select
              v-model="formInline.jcr"
              class="my-select"
              @change="communalChange"
            >
              <el-option
                v-for="item in JCROptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="分区">
            <el-select
              v-model="formInline.sub"
              class="my-select"
              @change="communalChange"
            >
              <el-option
                v-for="item in FenQuoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              /> </el-select
          ></el-form-item>
          <el-form-item label="综述占比">
            <el-select
              v-model="formInline.totalReviewRatio"
              class="my-select"
              @change="communalChange"
            >
              <el-option
                v-for="item in SSZBOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              /> </el-select
          ></el-form-item>
        </el-form>
      </el-header>
      <el-main style="display: flex; justify-content: center; padding: 18px 0">
        <div
          v-if="tableList"
          style="
            width: 1180px;
            background-color: #fff;
            padding: 0 20px;
            margin: 0 auto;
          "
        >
          <el-table
            :data="tableList"
            style="width: 100%"
            :header-row-style="{ height: '110px' }"
          >
            <el-table-column label="期刊名称" width="180" align="center">
              <template #default="scope">
                <span
                  @click="windowOpen(scope.row.issn)"
                  class="word-break text_color_primary full_name"
                  >{{ scope.row.journalTitle }}</span
                >
                <div class="word-break margin-top-10 text_color_secondary">
                  {{ scope.row.abbrJournal }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="journalDb"
              sortablesub
              :sort-method="sortJournalDb"
              label="数据库"
              align="center"
            />
            <el-table-column
              prop="impactFactor_2019"
              sortable
              :sort-method="sortImpactFactor_2019"
              label="影响因子"
              align="center"
            />
            <el-table-column
              prop="quote_factor"
              sortable
              :sort-method="sortQuoteFactor"
              label="引文指标"
              align="center"
            />
            <el-table-column
              label="JCR分区"
              sortable
              :sort-method="sortJCR"
              prop="jcr_Json"
              align="center"
            >
              <template #default="scope">
                <span>
                  {{
                    scope.row.jcr_Json
                      ? JSON.parse(scope.row.jcr_Json)[0].sub
                      : "-"
                  }}</span
                >
              </template>
            </el-table-column>
            <el-table-column
              prop="subZone"
              sortable
              :sort-method="sortSubZone"
              label="国内分区"
              align="center"
            >
              <template #default="scope">
                <span> {{ scope.row.subZone + "区" }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="annualPublication"
              label="年发文量"
              sortable
              :sort-method="sortAnnualPublication"
              align="center"
            />
            <el-table-column
              label="综述占比"
              sortable
              prop="totalReviewRatio"
              :sort-method="sortTableTotalReviewRatio"
              align="center"
            >
              <template #default="scope">
                <span>
                  {{
                    scope.row.totalReviewRatio
                      ? scope.row.totalReviewRatio + "%"
                      : "-"
                  }}</span
                >
              </template>
            </el-table-column>
            <el-table-column
              label="是否开源/开源占比"
              sortable
              :sort-method="sorTopenRatio"
              prop="open_ratio"
              align="center"
            >
              <template #default="scope">
                <span>
                  {{
                    scope.row.open_ratio
                      ? (scope.row.open_ratio * 100).toFixed(2) + "%"
                      : "-"
                  }}</span
                >
              </template>
            </el-table-column>
            <el-table-column label="是否国产" align="center">
              <template #default="scope">
                <span v-if="scope.row.isDomestic == 0">否 </span>
                <span v-if="scope.row.isDomestic == 1">是 </span>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            v-model:current-page="pageData.page_index"
            v-model:page-size="pageData.page_size"
            :size="size"
            :disabled="disabled"
            background
            layout="prev, pager, next, jumper"
            :total="pageData.total"
            style="height: 60px"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
        <el-empty v-else description="暂无符合条件期刊">
          <template #image>
            <img src="@/assets/images/null.png" alt="" />
          </template>
        </el-empty>
      </el-main>
      <el-footer class="footer">
        <div class="footer_content">
          <div class="logo_wrapper">
            <div class="logo_box">
              <img :src="topEditLogo1" class="img-logo mt30" />
              <div class="line"></div>
              <img :src="iJournalLogo1" class="img-logo mt30" />
            </div>
            <div class="web_info_box">
              <p
                class="text_line_height_40 text_size_12 text_color_placeholder"
              >
                © 2019 Topedit All Rights Reserved
              </p>
              <a
                href="https://xyt.xcc.cn/getpcInfo?sn=1813159197290688512&amp;language=CN&amp;certType=8&amp;url=www.topeditsci.com"
                target="_blank"
                style="position: relative; display: inline-block; height: 38px"
                ><div
                  style="
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 0px;
                    left: 0px;
                  "
                ></div>
                <embed
                  src="https://program.xinchacha.com/web/1813159197290688512=www.topeditsci.com.svg"
                  width="103"
                  height="38"
                  type="image/svg+xml"
                  pluginspage="//www.adobe.com/svg/viewer/install/"
              /></a>
            </div>
          </div>
          <div class="footer_content_item">
            <p class="footer_content_item_title">iJournal平台</p>
            <p class="footer_content_item_nav">首页</p>
            <p class="footer_content_item_nav">关于我们</p>
          </div>
          <div class="footer_content_item">
            <p class="footer_content_item_title">相关服务</p>
            <a href="https://www.topeditsci.com/" target="_blank"
              ><p class="footer_content_item_nav">论文服务</p></a
            ><a href="https://ithenticate.topeditsci.com/" target="_blank"
              ><p class="footer_content_item_nav">查重服务</p></a
            >
          </div>
          <div class="footer_content_item">
            <p class="footer_content_item_title">战略合作伙伴</p>
            <p class="footer_content_item_nav">
              投必得学术公众号
              <img src="@/assets/images/erweima1.png" />
            </p>
            <a href="https://www.zhihu.com/org/tou-bi-de/" target="_blank"
              ><p class="footer_content_item_nav">投必得学术知乎机构号</p></a
            >
            <p class="footer_content_item_nav">
              智慧科研公众号
              <img src="@/assets/images/erweima2.png" />
            </p>
          </div>
          <div class="footer_content_item">
            <p class="footer_content_item_title">联系我们</p>
            <p class="footer_content_item_nav">
              iJournal平台客服
              <img src="@/assets/images/erweima3.png" style="top: 30px" />
            </p>
          </div>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
import { Search } from "@element-plus/icons-vue";
import topEditLogo from "@/assets/images/topEdit_logo.png";
import iJournalLogo from "@/assets/images/iJournal_logo.png";
import topEditLogo1 from "@/assets/images/topEdit_logo1.png";
import iJournalLogo1 from "@/assets/images/iJournal_logo1.png";
import tableData from "../data/data.json";
import { tr } from "element-plus/es/locale/index.mjs";

const disabled = ref(false);

const handleSizeChange = (val) => {
  console.log(`${val} items per page`);
  pageData.page_size = val;
  if (keyword.value) {
    searchQuery();
  } else {
    methods.getList(tableData);
  }
};
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`);
  pageData.page_index = val;
  if (keyword.value) {
    searchQuery();
  } else if (
    formInline.jcr != "all" &&
    formInline.sub != "all" &&
    formInline.totalReviewRatio != "all"
  ) {
    communalChange();
  } else if (formInline.ifStart_2019 != "" && formInline.ifEnd_2019 != "") {
    yingziInput1(true);
  } else {
    methods.getList(tableData);
  }
};
const titleList = reactive([
  "期刊详情查询",
  "AI智能选刊",
  "期刊解析与推荐",
  "iThenticate查重",
  "关于我们",
]);

const keyword = ref("");
const keywordType = ref("title");

const formInline = reactive({
  ifStart_2019: "",
  ifEnd_2019: "",
  jcr: "all",
  sub: "all",
  totalReviewRatio: "all",
});

const FenQuoptions = reactive([
  {
    label: "不限",
    value: "all",
  },
  {
    label: "1区",
    value: 1,
  },
  {
    label: "2区",
    value: 2,
  },
  {
    label: "3区",
    value: 3,
  },
  {
    label: "4区",
    value: 4,
  },
]);
const JCROptions = reactive([
  {
    label: "不限",
    value: "all",
  },
  {
    label: "Q1",
    value: "Q1",
  },
  {
    label: "Q2",
    value: "Q2",
  },
  {
    label: "Q3",
    value: "Q3",
  },
  {
    label: "Q4",
    value: "Q4",
  },
]);
const SSZBOptions = reactive([
  {
    label: "不限",
    value: "all",
  },
  {
    label: "0~5%",
    value: "0,5",
  },
  {
    label: "5%~10%",
    value: "5,10",
  },
  {
    label: "10%~20%",
    value: "10,20",
  },
  {
    label: "20%~30%",
    value: "20,30",
  },
  {
    label: "30%~50%",
    value: "30,50",
  },
  {
    label: "50%以上",
    value: "50",
  },
]);
const pageData = reactive({
  total: 0,
  page_size: 10,
  page_index: 1,
});
let tableList = ref([]);

let isShow = ref(false);
const size = ref("default");

const windowOpen = (params) => {
  window.open(`https://ijournal.topeditsci.com/journal/${params}`);
};
const observerCallback = (entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      isShow.value = false;
    } else {
      isShow.value = true;
    }
  });
};
const yingziInput1 = (flag) => {
  const regex = /^[+]?\d+(\.\d{3})?$/;
  if (!formInline.ifStart_2019) {
    return ElMessage({
      customClass: "my-message",
      message: "请输入影响因子开始值",
      type: "warning",
    });
  } else {
    if (!regex.test(formInline.ifStart_2019)) {
      return ElMessage({
        customClass: "my-message",
        message: "请输入正确的影响因子（精确三位小数）",
        type: "warning",
      });
    } else {
      if (formInline.ifEnd_2019) {
        let queryData = [];
        if (!flag) {
          pageData.page_index = 1;
        }
        tableData.forEach((item) => {
          methods.checkConditions(item)
            ? queryData.push(methods.checkConditions(item))
            : "";
        });
        tableList.value = queryData;
        methods.getList(tableList.value);
      }
    }
  }
};
const yingziInput2 = () => {
  const regex = /^[+]?\d+(\.\d{3})?$/;
  if (!formInline.ifEnd_2019) {
    return ElMessage({
      customClass: "my-message",
      message: "请输入影响因子结束值",
      type: "warning",
    });
  } else {
    if (!regex.test(formInline.ifEnd_2019)) {
      return ElMessage({
        customClass: "my-message",
        message: "请输入正确的影响因子（精确三位小数）",
        type: "warning",
      });
    } else {
      if (formInline.ifStart_2019) {
        let queryData = [];
        pageData.page_index = 1;
        tableData.forEach((item) => {
          methods.checkConditions(item)
            ? queryData.push(methods.checkConditions(item))
            : "";
        });
        tableList.value = queryData;
        methods.getList(tableList.value);
      }
    }
  }
};
const searchQuery = () => {
  if (keyword.value) {
    let queryData = [];
    tableData.forEach((item) => {
      switch (keywordType.value) {
        case "issn":
          if (item.issn && item.issn.includes(keyword.value)) {
            methods.checkConditions(item)
              ? queryData.push(methods.checkConditions(item))
              : "";
          }
          break;
        case "title":
          if (item.journalTitle && item.journalTitle.includes(keyword.value)) {
            methods.checkConditions(item)
              ? queryData.push(methods.checkConditions(item))
              : "";
          }
          break;
        case "abbr":
          if (item.abbrJournal && item.abbrJournal.includes(keyword.value)) {
            methods.checkConditions(item)
              ? queryData.push(methods.checkConditions(item))
              : "";
          }
          break;
        case "category":
          if (item.subjectDcac && item.subjectDcac.includes(keyword.value)) {
            methods.checkConditions(item)
              ? queryData.push(methods.checkConditions(item))
              : "";
          }
          break;
        default:
          return true;
      }
    });
    tableList.value = queryData;
    methods.getList(tableList.value);
  } else {
    ElMessage({
      customClass: "my-message",
      message: "请输入关键字搜索",
      type: "warning",
    });
  }
};
const communalChange = () => {
  let queryData = [];
  pageData.page_index = 1;
  tableData.forEach((item) => {
    methods.checkConditions(item)
      ? queryData.push(methods.checkConditions(item))
      : "";
  });
  tableList.value = queryData;
  methods.getList(tableList.value);
};

const scrollContainer =
  document.documentElement || document.body.parentNode || document.body;
// 使用requestAnimationFrame实现平滑滚动
const scrollStep = () => {
  if (scrollContainer.scrollTop > 0) {
    scrollContainer.scrollTo(
      0,
      scrollContainer.scrollTop - scrollContainer.scrollTopscrollTop / 5
    );
    requestAnimationFrame(() =>
      scrollStep(
        scrollContainer.scrollTopscrollTop -
          scrollContainer.scrollTopscrollTop / 5
      )
    );
  } else {
    scrollContainer.scrollTo(0, 0);
  }
};

onMounted(() => {
  const options = {
    root: null, // 使用视口作为根
    threshold: 0.1, // 当至少10%的元素在视口中时触发回调
  };
  const observer = new IntersectionObserver(observerCallback, options);
  const element = document.querySelector("#navigation");
  observer.observe(element);
});
const methods = {
  /**
   * 获取表格数据
   */
  getList(list) {
    if (list.length > 0) {
      pageData.total = list.length;
      // 计算当前页的起始索引
      const startItemIndex = (pageData.page_index - 1) * 10;

      // 计算当前页的结束索引
      const endItemIndex = startItemIndex + 10;

      // 计算当前页的数据
      const pageItems = list.slice(startItemIndex, endItemIndex);
      tableList.value = pageItems;
    }
  },
  checkConditions(item) {
    console.info("659");
    let impact = true;
    let jcr = true;
    let sub = true;
    let total = true;
    if (formInline.ifStart_2019 != "" && formInline.ifEnd_2019 != "") {
      if (
        Math.round(parseFloat(formInline.ifStart_2019).toFixed(3) * 1000) <=
          Math.round(parseFloat(item.impactFactor_2019).toFixed(3) * 1000) &&
        Math.round(parseFloat(item.impactFactor_2019).toFixed(3) * 1000) <=
          Math.round(parseFloat(formInline.ifEnd_2019).toFixed(3) * 1000)
      ) {
        impact = true;
      } else {
        impact = false;
      }
    }

    if (formInline.jcr != "all") {
      if (item.jcr_Json && formInline.jcr == JSON.parse(item.jcr_Json)[0].sub) {
        jcr = true;
      } else {
        jcr = false;
      }
    }
    if (formInline.sub != "all") {
      if (item.subZone && formInline.sub == item.subZone) {
        sub = true;
      } else {
        sub = false;
      }
    }
    if (formInline.totalReviewRatio != "all") {
      if (item.totalReviewRatio) {
        if (
          formInline.totalReviewRatio == "50" &&
          item.totalReviewRatio >= 50
        ) {
          total = true;
        } else if (formInline.totalReviewRatio.indexOf(",") != -1) {
          let arr = formInline.totalReviewRatio.split(",");

          if (
            arr[0] < parseInt(item.totalReviewRatio) &&
            parseInt(item.totalReviewRatio) < arr[1]
          ) {
            total = true;
          } else {
            total = false;
          }
        } else {
          total = false;
        }
      } else {
        total = false;
      }
    }
    if (
      formInline.jcr == "all" &&
      formInline.sub == "all" &&
      formInline.totalReviewRatio == "all" &&
      formInline.ifStart_2019 == "" &&
      formInline.ifEnd_2019 == ""
    ) {
      return item;
    } else if (jcr && sub && total && impact) {
      return item;
    } else {
      return "";
    }
  },
};

onMounted(() => {
  methods.getList(tableData);
});
onBeforeUnmount(() => {
  // 清理工作，停止监听
  const element = document.querySelector("#navigation");
  observer.unobserve(element);
  observer.disconnect();
});
const sortJournalDb = (a, b) => a.journalDb - b.journalDb;
const sortImpactFactor_2019 = (a, b) =>
  a.impactFactor_2019 - b.impactFactor_2019;
const sortQuoteFactor = (a, b) => a.quote_factor - b.quote_factor;
const sortJCR = (a, b) =>
  JSON.parse(a.jcr_Json)[0].sub.slice(1) -
  JSON.parse(b.jcr_Json)[0].sub.slice(1);
const sortSubZone = (a, b) => a.subZone - b.subZone;
const sortAnnualPublication = (a, b) =>
  a.annualPublication - b.annualPublication;
const sortTableTotalReviewRatio = (a, b) =>
  a.totalReviewRatio - b.totalReviewRatio;
const sorTopenRatio = (a, b) => a.open_ratio - b.open_ratio;
</script>

<style scoped lang="less">
.my-header {
  height: 138px;
  width: 100%;
  box-shadow: 0 5px 7px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  margin: 0 auto;
  padding: 20px 50px 14px;
}
.my-navigation {
  height: 51px;
  width: 100%;
  border-bottom: 1px solid #dcdfe6;
  background-color: #fff;
}
.input-search-select {
  max-width: 800px;
  height: 46px;
  border: 1px solid #0fa4b3;
  border-radius: 0px;
  :deep(.el-input-group__append),
  :deep(.el-input-group__prepend) {
    border-radius: 0px;
  }
  :deep(.el-input-group__append) {
    background-color: #0fa4b3;
    box-shadow: none;
  }
  :deep(.el-input-group__append .el-icon) {
    color: #fff;
    font-size: 16px;
  }
  :deep(.el-input__wrapper) {
    box-shadow: none;
    border-left: 1px solid #dcdfe6;
  }
  :deep(.el-select .el-select__wrapper) {
    height: 100%;
    background-color: #fff !important;
    box-shadow: none;
    border-radius: 0px;
    text-align: center;
  }
}

.my-select {
  width: 100px;
  :deep(.el-select__wrapper) {
    box-shadow: none;
  }
}
.common-layout {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  min-width: 1280px;
  min-height: 100%;
  background-color: #f6f6f8;
}
.el-pagination {
  justify-content: center;
}
.margin-top-10 {
  margin-top: 10px;
}
.text_color_secondary {
  color: #909399;
}
.text_color_primary {
  color: #303133;
}
.full_name:hover {
  transition: all 0.3sease;
  color: #0fa4b3;
  text-decoration: underline;
  cursor: pointer;
}
:deep(.el-table__row:hover .el-table__cell .full_name) {
  transition: all 0.3sease;
  color: #0fa4b3;
  text-decoration: underline;
  cursor: pointer;
}
.word-break {
  word-break: normal;
}
:deep(.el-table thead th) {
  color: #909399;
  font-weight: 500;
}
.img-logo {
  width: 100px;
  height: 30px;
  line-height: 30px;
  cursor: pointer;
}
.nav_item {
  height: 30px;
  line-height: 30px;
  padding: 0 20px;
  cursor: pointer;
  font-size: 14px;
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  &:hover {
    color: #0fa4b3;
  }
}
.line {
  width: 1px;
  height: 30px;
  background: rgba(0, 0, 0, 0.2);
  margin: 0 16px;
}
.footer .line {
  width: 1px;
  height: 20px;
  background: hsla(0, 0%, 100%, 0.2);
  margin: 15px 10px 0;
}
.login-button {
  margin-left: 20px;
  border-radius: 0;
}
.yxyz-input {
  width: 52px;
  height: 32px;
  :deep(.el-input__wrapper) {
    border-radius: 0;
  }
}
.divide {
  width: 10px;
  height: 1px;
  background: #dcdfe6;
  margin: 0 5px;
}

.footer_content {
  display: flex;
  height: 100%;
  width: 1180px;
  margin: 0 auto;
}
.logo_wrapper {
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-right: 66px;
}
.logo_box {
  display: flex;
  height: 50px;
}
.footer_content_item {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding-left: 40px;
}
.footer_content_item_title {
  color: #fff;
  line-height: 40px;
  margin-bottom: 10px;
}
.footer_content_item_nav {
  color: #c0c4cc;
  line-height: 30px;
  position: relative;
}
.footer {
  position: relative;
  user-select: none;
  flex: none;
  display: flex;
  height: 250px;
  min-height: 250px;
  background-color: #202329;
  padding: 20px 0 10px;
  font-size: 14px;
  text-align: left;
  .footer_content_item_nav > img {
    display: none;
    width: 80px;
    height: 80px;
    position: absolute;
    top: -80px;
    left: 50px;
  }
}
.mt30 {
  margin-top: 13px;
  cursor: pointer;
  width: 130px;
  height: 30px;
}

.sidebar {
  position: absolute;
  top: 51px;
  bottom: 0;
  right: 0;
  width: 40px;
  padding-top: 11px;
  background: #fff;
  -webkit-box-shadow: 0 5px 6px rgba(0, 0, 0, 0.16);
  box-shadow: 0 5px 6px rgba(0, 0, 0, 0.16);
  z-index: 200;
  -webkit-transition: width 0.3sease;
  transition: width 0.3sease;
}
.sidebar .item {
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 70px;
  padding-top: 14px;
  font-size: 12px;
  color: #909399;
  cursor: pointer;
  &:hover {
    background-color: #f2f5f9;
    span,
    i {
      color: #0fa4b3 !important;
    }
  }
}
.margin-top-5 {
  margin-top: 5px;
}
.sidebar {
  &:hover {
    width: 60px;
    span {
      display: inline !important;
    }
  }
}
.sidebar .item i {
  font-size: 20px;
  color: #303133;
}
.text_color_placeholder {
  color: #c0c4cc;
}
.text_line_height_40 {
  line-height: 40px;
}
.text_size_12 {
  font-size: 12px;
}
.sidebar_fixed {
  position: fixed;
  top: 0;
}
.sidebar .back_top {
  position: absolute;
  top: 74.3%;
  padding-top: 0;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
</style>
<style>
.my-message {
  width: 380px !important;
}
</style>

